<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
	<head th:replace="admin/_fragments :: head(~{::title})">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>博客管理</title>
		<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}" />
		<!-- 引入semantic css-->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
		<link rel="stylesheet" href="http://whczff.xyz/cdn/lib/editormd/css/editormd.min.css" />
	</head>
	<body>
		<!--导航-->
		<nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">后台管理</h2>
					<a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>博客</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
					<div class="right m-item m-mobile-hide menu">
						<div class="ui dropdown item">
							<div class="text">
								<img class="ui avatar image" src="https://picsum.photos/id/237/200/300" alt="" />
								derek
							</div>
							<div class="dropdown icon"></div>
							<div class="menu">
								<a href="#" class="item">注销</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		
		<!-- 二级导航 -->
		<div class="ui attached pointing menu">
			<div class="ui container">
				<div class="right menu">
					<a href="#" th:href="@{/admin/blog-input}" class="teal active item">发布</a>
					<a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
				</div>	
			</div>
			
		</div>
		
		
		
		<!--中间内容-->
		<div class="m-container m-padding-tb-big">
			<div class="ui container">
				<form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
					<input type="hidden" name="published">
					<input type="hidden" name="id" th:value="*{id}">
					<div class="required field">
						<div class="ui left labeled action input">
							<div class="ui selection compact teal basic dropdown label">
								<input type="hidden" name="flag"  value="原创" th:value="*{flag}"/>
								<i class="dropdown icon"></i>
								<div class="default text">原创</div>
								<div class="menu">
									<div class="item" data-value="原创">原创</div>
									<div class="item" data-value="转载">转载</div>
									<div class="item" data-value="翻译">翻译</div>
								</div>
							</div>
							<input type="text" name="title" th:value="*{title}" placeholder="标题"/>
						</div>
					</div>
					<div class="required field">
						<div id="md-content" style="z-index: 1 !important;">
							<textarea placeholder="博客内容" name="content" th:text="*{content}" style="display: none;">
#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory
							</textarea>
						</div>						
					</div>
					
					<div class="required field">
						<div class="ui left labeled input">
							<label class="ui teal basic label">首图</label>
							<input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="首图引用地址"/>
						</div>
					</div>
					
					<div class="two fields">
						<div class="required field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">分类</label>
								<div class="ui fluid selection dropdown">
									<input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}"/>
									<i class="dropdown icon"></i>
									<div class="default text">分类</div>
									<div class="menu">
										<div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
										<!--/*-->
										<div class="item" data-value="2">的</div>
										<div class="item" data-value="3">错误达瓦日志</div>
										<!--*/-->
									</div>
								</div>
							</div>
						</div>
						<div class="field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">标签</label>
								<div class="ui fluid multiple search selection dropdown">
									<input type="hidden" name="tagIds" th:value="*{tagIds}"/>
									<i class="dropdown icon"></i>
									<div class="default text">标签</div>
									<div class="menu">
										<div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">错误日志</div>
										<!--/*-->
										<div class="item" data-value="2">的</div>
										<div class="item" data-value="3">错误达瓦日志</div>
										<!--*/-->
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 选项开关 -->
					<div class="inline fields">
						<div class="field">
							<div class=" ui checkbox">
								<input class="hidden" type="checkbox" id="recommended" name="recommend" th:checked="*{recommend}" checked/>
								<label for="recommended">推荐</label>
							</div>
						</div>
						
						<div class="field">
							<div class=" ui checkbox">
								<input class="hidden" type="checkbox" id="shareStatement" th:checked="*{shareStatement}" name="shareStatement" />
								<label for="shareStatement">转载声明</label>
							</div>
						</div>
						<div class="field">
							<div class=" ui checkbox">
								<input class="hidden" type="checkbox" id="appreciation" th:checked="*{appreciation}"  name="appreciation" checked/>
								<label for="appreciation">赞赏</label>
							</div>
						</div>
						<div class="field">
							<div class=" ui checkbox">
								<input class="hidden" type="checkbox" id="commentable" th:checked="*{commentable}" name="commentable" checked/>
								<label for="commentable">评论</label>
							</div>
						</div>
					</div>
					
					<div class="ui error message">
						<!-- 错误提示 -->
					</div>
					
					 <div class="ui right aligned container">
						 <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
						 <button type="button" id="save-btn" class="ui secondary button">保存</button>
						 <button type="button" id="publish-btn" class="ui teal button">发布</button>
					 </div>
				</form>
			</div>
		</div>



		
		
		<br>
		<br>
		<!--底部 footer-->
		<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padding-tb-massive">
			<div class="ui center aligned container">
				<div class="ui inverted di vided stackable grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<img src="../../static/img/QRcode.png" th:src="@{/../../img/QRcode.png}" class="ui rounded image" alt="" style="width: 100px;"/>
							</div>
						</div>	
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">联系方式</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="seven wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">derek</h4>
						<p class="m-text-thin m-text-spaced m-opacity-mini">https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"><</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-spaced m-opacity-mini">CopyRight</p>
			</div>		
		</footer>
		
		<!-- 引入semantic js-->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<script src="../../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
		<script>
			//初始化markdowm 
			var contentEditor;
			$(function() {
			    contentEditor = editormd("md-content", {
			        width   : "100%",
			        height  : 640,
			        syncScrolling : "single",
			        path    : "../lib/editormd/lib/"
			    });
			});
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			})
			$('.ui.dropdown').dropdown();
			$('.ui.form').form({
				fields: {
					title : {
						identifier: 'title',
						rules: [{
							type: 'empty',
							prompt: '提示：请输入博客标题'
						}]
					},
					content : {
						identifier: 'content',
						rules: [{
							type: 'empty',
							prompt: '提示：请输入博客内容'
						}]
					},
					typeId : {
						identifier: 'type.id',
						rules: [{
							type: 'empty',
							prompt: '提示：请输入博客分类'
						}]
					},
					firstPicture : {
						identifier: 'firstPicture',
						rules: [{
							type: 'empty',
							prompt: '提示：请输入博客首图地址'
						}]
					}
				}
			})

			$('#save-btn').click(function (){
				$("[name='published']").val(false);
				$('#blog-form').submit();
			})
			$('#publish-btn').click(function (){
				$("[name='published']").val(true);
				$('#blog-form').submit();
			})
		</script>
	</body>
	
</html>
